{include file="common:head" /}
<style type="text/css">
    .message {
        display: none;
        padding: 20px;
        position: fixed;
        top: 40%;
        left: 40%;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 5000;
        color: #FFF;
    }

    .appoint .car-appoint > h3 {
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        padding-left: 10px;
        margin-bottom: 16px;
        background-color: #f1f0f0;
        color: #000000;
        border: 1px solid #CECECE;
    }

    .appoint .car-appoint .appoint-car-list {
        position: relative;
        float: left;
        box-sizing: border-box;
        width: calc(25% - 12px);
        margin-right: 16px;
        margin-bottom: 16px;
        text-align: center;
        border: 1px solid #CECECE;
        width: 192px;
        height: 173px;
    }
    p {
        margin-top: -60px;
    }
    .appoint .car-appoint .appoint-car-list:nth-child(4n) {
        margin-right: 0;

    }

    .appoint .car-appoint .appoint-car-list .img-box {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .appoint .car-appoint .appoint-car-list .img-box img {
        width: 100%;
    }

    .appoint .car-appoint .appoint-car-list p {
        height: 36px;
        line-height: 36px;
    }

    .appoint .car-appoint .appoint-car-list.active {
        border-color: #0075D8;
    }

    .appoint .car-appoint .appoint-car-list.active i {
        display: block;
        color: #0075D8;
    }

    .appoint .car-appoint .appoint-car-list i {
        position: absolute;
        bottom: 5px;
        right: 8px;
        display: none;
        font-size: 20px;
        font-weight: bold;
        color: #0075D8;
    }

    .infor {
        padding-top: 60px;
        padding-bottom: 100px;
        text-align: center;
        border: 1px solid #CECECE;
    }

    .infor .info-list {
        margin-bottom: 20px;
    }

    .infor .info-list .info-left {
        float: left;
        text-align: right;
        width: 550px;
        margin-right: 10px;
        height: 30px;
        line-height: 30px;
    }

    .infor .info-list .info-right {
        float: left;
        text-align: left;
        height: 30px;
        line-height: 30px;
    }

    .infor .info-list .info-right input[type = text], .infor .info-list .info-right input[type = number] {
        width: 232px;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        border: 1px solid #CECECE;
    }

    .infor .info-list .rightselect {
        width: 242px;
        line-height: 30px;
        border: 1px solid #CECECE;
    }

    .infor .info-list .rightselect select {
        width: 225px;
        padding-left: 10px;
        border: none;
    }

    .infor .info-list .rightselect select option {
        line-height: 30px;
    }

    .infor .info-list .rightselect .iconfont {
        float: right;
    }

    .infor .info-list input[type=radio] {
        float: left;
        margin-top: 9px;
        margin-right: 5px;
        appearance: radio;
        -webkit-appearance: radio;
    }

    .infor .info-list span.radiospan {
        float: left;
        margin-right: 10px;
    }

    .submitInfor {
        width: 140px;
        height: 36px;
        line-height: 36px;
        margin: 0 auto;
        border-radius: 6px;
        border: 1px solid #CECECE;
        background-color: transparent;
    }

</style>
<body>
<div class="index-content">
    <!-- 头部 -->

    {include file="common:header" /}

    <!-- 当季热销车 -->
    <div class="hot-carbuy appoint width1300">
        <span id="message" class="message"></span>

        <div class="title">预约试驾</div>
        <div class="car-appoint">
            <h3>选择车系</h3>
            <div class="appoint-content clearfix">
                {volist name="cate" id="item"}
                <div class="appoint-car-list" data-id="{$item.id}">
                    <div class="img-box">
                        <img src="{$item.image}"/>
                    </div>
                    <p>{$item.name}</p>
                    <i class="iconfont icon-duihao"></i>
                </div>
                {/volist}

            </div>
            <h3>填写信息</h3>
            <div class="infor">
                <form onsubmit="return false" id="form" action="appoint_create" method="post">
                    <div class="info-list clearfix">
                        <div class="info-left">姓名</div>
                        <div class="info-right">
                            <input type="text" placeholder="请填写您的姓名,例如:李先生" name="name" required/>
                            <span>（此项非必填）</span>
                        </div>
                    </div>
                    <div class="info-list clearfix">
                        <div class="info-left">称谓</div>
                        <div class="select info-right">
                            <div class=" fl">
                                <input type="radio" value="1" name="sex" checked="checked"/><span
                                    class="radiospan">先生</span>&nbsp;&nbsp;
                            </div>
                            <div class=" fl">
                                <input type="radio" value="2" name="sex"/><span class="radiospan">女士</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-list clearfix">
                        <div class="info-left">手机号码</div>
                        <div class="info-right">
                            <input type="text" placeholder="请填写您的姓名,例如:李先生" name="phone" required/>
                        </div>
                    </div>
                    <div data-toggle="distpicker">
                        <div class="info-list clearfix">
                            <div class="info-left">所在省份</div>
                            <div class="info-right rightselect">
                                <select id="province1" name="province">
                                    <!--                            <option value ="volvo">请选择所在省份</option>-->
                                    <!--                            <option value ="saab">Saab</option>-->
                                    <!--                            <option value="opel">Opel</option>-->
                                    <!--                            <option value="audi">Audi</option>-->
                                </select>
                                <span class="iconfont icon-down-fill-xs"></span>
                            </div>
                        </div>
                        <div class="info-list clearfix">
                            <div class="info-left">所在城市</div>
                            <label for="city">
                                <div class="info-right rightselect" id="city">
                                    <select id="city1" name="city">
                                        <!--                                    <option value ="volvo">请选择所在城市</option>-->

                                    </select>
                                    <span class="iconfont icon-down-fill-xs"></span>
                                </div>
                            </label>
                        </div>
                    </div>

                    <div class="info-list clearfix">
                        <div class="info-left">计划购车时间</div>
                        <label for="but_time">
                            <div class="info-right rightselect">
                                <select id="but_time" name="plan_time">
                                    <option value="">请选择计划购车时间</option>
                                    {volist name="plan_time" id = "item"}
                                    <option value="{$item.value}">{$item.label}</option>
                                    {/volist}
                                </select>
                                <span class="iconfont icon-down-fill-xs"></span>
                            </div>
                        </label>
                    </div>
                    <div class="info-list clearfix">
                        <div class="info-left">希望得到反馈时间</div>
                        <div class="select info-right">
                            <div class=" fl">
                                <input type="radio" value="1" name="type" checked="checked"/><span
                                    class="radiospan">全天</span>&nbsp;&nbsp;
                            </div>
                            <div class=" fl">
                                <input type="radio" value="2" name="type"/><span class="radiospan">工作日</span>&nbsp;&nbsp;
                            </div>
                            <div class=" fl">
                                <input type="radio" value="3" name="type" checked="checked"/><span
                                    class="radiospan">双休</span>
                            </div>
                        </div>
                    </div>

                    <input type="button" value="提交" class="submitInfor" name="submit" style="color:#000;" onclick="mySubmit(this)"/>
                </form>
            </div>
        </div>
    </div>


    {include file="common:footer" /}
</div>
<script type="text/javascript" src="__STATIC__/index/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/common.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/header_move.js"></script>
<script type="text/javascript" src="__STATIC__/index/jQuery/distpicker.data.js"></script>
<script type="text/javascript" src="__STATIC__/index/jQuery/distpicker.js"></script>
<script type="text/javascript" src="/static/index/js/axios.min.js"></script>
<script type="text/javascript">
    var selectId = '';

    $(".appoint-content").on("click", ".appoint-car-list", function () {
        $(this).addClass("active").siblings().removeClass("active");
        selectId = $(this).attr("data-id");

    })
    // 表单提交
    function mySubmit() {

        var flg = true;
        let formData = new FormData(form);
        var regExpP = /^1[34578]\d{9}$/; //手机号

        let name = formData.get('name');
        let sex = formData.get('sex');
        let phone = formData.get('phone');
        let province = formData.get('province');
        let city = formData.get('city');
        let plan_time = formData.get('plan_time');
        let type = formData.get('type');

        if (phone == "" || !regExpP.test(phone)) {
            message("请填写正确的手机号码")
            flg = false
        }


        if (selectId == "") {
            message("您还没有选择车系！！！")
            flg = false
        }

        if (plan_time == "") {
            message("您还没有预购时间！！！")
            flg = false
        }
        obj = {
            'name': name,
            'sex': sex,
            'phone': phone,
            'province': province,
            'city': city,
            'plan_time': plan_time,
            'type': type,
            'cid': selectId
        };

        let url = "appoint_create"

        if (flg) {
            axios({
                url: url,
                method: 'post',
                data: obj
            }).then(res => {

                if (res.data.code == 1){
                    message("感谢您的关注，敬请期待！！")
                }else {
                    message("数据异常，稍后重试！")
                }
            })
        }

        return false;
    }

    function message(message = "验证失败！请刷新") {
        $('#message').html(message).show().delay(1000).fadeOut();
    }
</script>
</body>

</html>
